html 常用标签(元素)
(1) 标签相关概念
1. HTML版本
html的版本有:
- HTML1.0
- HTML2.0
- HTML3.2
- HTML4.0
- HTML4.01(微小改进)
- HTML5:2008年正式发布,现在都在用第5版的html
2. HTML文件
一个html文件用浏览器打开就是一个网页
第一个网页(有文字, 有链接和图片)
3. 标签及其语法
标签也叫元素,网页就是由标签的来组成
标签语法:
- 注释
<!-- 注释内容 -->
- 标签对
- 单标签
- 标签属性(给标签提供附加信息)
- 多个空格只算一个
- 注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标签对,多个空格只能算一个 -->
<h3>我的 第一个网页</h3>
<!-- 标签属性:href是属性名称,="xxx" xxx是属性的值 -->
<a href="http://www.baidu.com">百度</a>
<!-- 单标签 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<!-- 单标签后面的/,是可选的 -->
<img src="" alt="" />
</body>
</html>
(2) 结构标签
一个网页的骨架标签
<html>
页面的根标签,最顶层标签。<head>
定义关于文档的信息(不会显示到页面)<body>
定义文档的主体(要显示到页面中的内容)<title>
定义文档的标题,显示到浏览器的选项卡中。该标签必须写在<head>
标签内部。<meta>
描述 HTML 文档的元数据。通过标签中属性设置其相关的信息charset
定义文档的字符编码。h5 新增name
属性规定元数据的名称,取值通常有keywords
、description
、author
name 属性需要配合 content属性一起使用。
<link>
定义文档与外部资源的关系href
定义被链接文档的位置。rel 规定当前文档与被链接文档/资源之间的关系。常用取值如下:
stylesheet
表示要导入的样式表的 URL。icon
导入表示该文档的图标。 浏览器标签栏图标格式为 .ico 图片在线转换 ICO
(3) 文本标签
标签列表
<h1> ... <h6>
标题标签<div>
区块标签(大)<span>
区块标签(小)<p>
段落<br>
换行<hr>
水平线<strong>
定义语气更为强烈的强调文本<i>
斜体文本<pre>
预格式文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
</head>
<body>
<!-- 标题标签 -->
<h1>hhhhhhhhhhhhhhhhhh</h1>
<h2>hhhhhhhhhhhhhhhhhh</h2>
<h3>hhhhhhhhhhhhhhhhhh</h3>
<h4>hhhhhhhhhhhhhhhhhh</h4>
<h5>hhhhhhhhhhhhhhhhhh</h5>
<h6>hhhhhhhhhhhhhhhhhh</h6>
<!-- 区块标签(大) -->
<div>div1</div>
<div>div2</div>
<div>div3</div>
<!-- 区块标签(小) -->
<span>啊啊啊啊啊啊啊啊啊啊啊啊</span>
<span>span2</span>
<span>span3</span>
<!-- 段落标签 -->
<p>ppppppppppp</p>
<p>ppppppppppp</p>
<p>ppppppppppp</p>
<!-- 换行 -->
<p>我爱<br/>中国</p>
<!-- 水平线 -->
<hr>
<!-- 加强语气 -->
<p>我爱<strong>中国</strong></p>
<!-- 斜体 -->
<i>我爱中国</i>
<!-- 保留格式 -->
<p>
function add() {
console.log(111)
}
</p>
<pre>
function add() {
console.log(111)
}
</pre>
</body>
</html>
其他文本标签
- <b> 粗体文本
- <em> 强调文本
- <ins> 被插入文本
- <u> 下划线文本
- <s> 加删除线的文本
- <del> 被删除文本
- <sub> 下标文本
- <sup> 上标文本
- <code> 计算机代码文本
(4) 列表
<ul>
无序列表<ol>
有序列表<li>
列表项,<ul><ol>
列表的子级标签
<dl>
自定义列表<dt>
自定义列表中项<dd>
自定义列表项的描述
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 无序列表 --> <ul> <li>红色</li> <li>黄色</li> <li>蓝色</li> </ul> <!-- 有序列表 --> <ol> <li>红色</li> <li>黄色</li> <li>蓝色</li> </ol> <!-- 自定义列表 --> <dl> <dt>广东城市列表</dt> <dd>广州</dd> <dd>深圳</dd> <dd>清远</dd> <dt>广西城市列表</dt> <dd>桂林</dd> <dd>柳州</dd> <dd>南宁</dd> </dl> </body> </html>
(5) 链接
<a>
定义一个链接
href 规定链接的目标 URL, 有四个取值
- 互联网上的一个地址, 比如
- 本地的一个html文件
#
回到顶部#aa
回到一个id="aa" 的元素那里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="./demo1.html">demo1</a> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <div id="aa">这是div标签</div> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <p>pppppppppppp</p> <a href="#">回到顶部</a> <a href="#aa">去div标签</a> </body> </html>
target 定在何处打开目标 URL。仅在 href 属性存在时使用。常用取值
_self
在本业面中打开(默认)_blank
在新的页面中打开
<!DOCTYPE html> <html lang="en"> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.baidu.com" target="_blank">百度2</a> </body> </html>
(6) 图片
<img>
定义图片
- alt 图片不显示时的替代文本
- src 要显示图片的 URL
src属性的值可以是本地图片,网络图片,或者是base64格式的文本。
<!DOCTYPE html>
<html lang="en">
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
<img src="./img/aaaaaaaaaaaaaaaaaaaaaaaaa.png" alt="">
<!-- alt图片加载失败或者不存在时显示的文字描述 -->
<img src="./img/aaaaa.png" alt="图片不存在">
<!-- base64格式 -->
<img src="data:image/png;base64,iVBORw0KGgoAAAAN.... />
</body>
</html>
(7) html转义字符(字符实体)
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
¥ | 元(yen) | ¥ | ¥ |
https://www.w3school.com.cn/html/html_entities.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>我爱 web</h3>
<p>¥ 100.00</p>
</body>
</html>
(8) 表格
表格里的标签
<table>
定义一个表格<caption>
定义表格标题<thead>
定义表格中的表头内容<th>
定义表格中的表头单元格<tbody>
定义表格中的主体内容<tfoot>
定义表格中的表注内容(脚注)<tr>
定义表格中的行<td>
<!DOCTYPE html> <html lang="en"> <body> <table> <!-- 表格标题 --> <caption>web1115班通讯录</caption> <!-- 表头 --> <thead> <!-- tr 一行 --> <tr> <!-- 表头里的单元格 --> <th>姓名</th> <th>性别</th> <th>手机号码</th> </tr> </thead> <!-- 表格的主体内容 --> <tbody> <tr> <!-- 主体的单元格 --> <td>欧*祥1</td> <td>男</td> <td>1380000000000</td> </tr> <tr> <!-- 主体的单元格 --> <td>欧*祥2</td> <td>男</td> <td>1380000000000</td> </tr> <tr> <!-- 主体的单元格 --> <td>欧*祥3</td> <td>男</td> <td>1380000000000</td> </tr> </tbody> </table> </body> </html>
在表格中
<thead>
和<tfoot>
只能有一个但<tbody>
可以有多个 (了解)通常情况下,在写表格时不写
<thead>
,<tbody>
,<tfoot>
标签而是直接在<table>
中写<tr>
,<td>
。代码在浏览器中执行时会自动补全<tbody>
(了解)表格设置
- 为表格设置边框:
<table border="1"> </table>
- 合并表格边框
<table border="1" cellspacing="0"></table>
- 设置表格宽度
<table border="1" cellspacing="0" width="800"></table>
- 设置表格对齐方式
<table border="1" cellspacing="0" width="800" align="center"></table>
<!DOCTYPE html> <html lang="en"> <body> <table border="1" cellspacing="0" width="400" align="center"> <caption>web1115班通讯录</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>手机号码</th> </tr> </thead> <tbody> <tr> <td align="center">欧*祥1</td> <td align="center">男</td> <td align="center">1380000000000</td> </tr> <tr> <td align="center">欧*祥2</td> <td align="center">男</td> <td align="center">1380000000000</td> </tr> </tbody> </table> </body> </html>
- 为表格设置边框:
单元格设置
单元格对齐
<td align="center">小明</td>
设置单元格宽高
<td height="100" width="100" align="center">小明</td>
合并单元格:通过设置
<td>
属性可以合并单元格- colspan 设置单元格可横跨的列数 (合并后占几列)
- rowspan 设置单元格可横跨的行数 (合并后占几行)
技巧:
- 给合并者添加colspan或者rowspan, 设置合并的个数
- 注释或者删掉被合并者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" width="400" align="center"> <thead> <tr> <th>第1列</th> <th>第2列</th> <th>第3列</th> </tr> </thead> <tbody> <tr> <td align="center" colspan="2">1</td> <!-- <td align="center">2</td> --> <td align="center">3</td> </tr> <tr> <td align="center">4</td> <td align="center">5</td> <td align="center" rowspan="2">6</td> </tr> <tr> <td align="center" colspan="2">7</td> <!-- <td align="center">8</td> --> <!-- <td align="center">9</td> --> </tr> </tbody> </table> </body> </html>
(9) 表单
表单是构成 Web 页面的重要组成部分。它们提供了大量你所需要用来与网站进行交互所需的功能。比如注册、登录、发送评论反馈、购买商品等等。
01 <form>
定义一个 HTML 表单
以下三个属性了解即可, 现在几乎用不到
- action:规定当提交表单时向何处发送表单数据。
- method:发送表单数据的 HTTP 方法,get/post。
- target:在何处打开 action URL,取值_blank,_self。
02 <input>
输入控件
type:指定输入控件的类型,常用取值:
text
文本输入框password
密码输入框radio
单选框checkbox
多选框file
文件上传reset
重置按钮submit
提交按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="http://www.huruqing.cn:3009/aa" method=""> <p> 用户名: <input type="text" placeholder="请输入用户名"> </p> <p> 密码: <input type="password" placeholder="请输入密码"> </p> <p> <!-- 必须加上相同的name,才能实现单选 --> 性别: 男<input type="radio" name="aa"> 女<input type="radio" name="aa"> </p> <p> 爱好: 音乐<input type="checkbox"> 运动<input type="checkbox"> 电影<input type="checkbox"> </p> <p> 上传: <input type="file"> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>
表单属性
- placeholder占位符
- value:控件的输入值。
- disabled:禁用元素。
- readonly:文本只读。
- name:元素名称。
- maxlength: 最大长度
<!DOCTYPE html> <html lang="en"> <body> <p> value属性: <input type="text" placeholder="请输入用户名" value="我是老胡"> </p> <p> disabled属性: <input type="text" value="我是老胡2" disabled> </p> <p> readonly属性: <input type="text" readonly value="哈哈哈"> <br> </p> <p> name属性: 1<input type="radio" name="aa"> 2<input type="radio" name="aa"> </p> <p> maxlength属性: <input type="text" maxlength="11" placeholder="手机号码"> </p> </body> </html>
03 <label>
定义 checkbox
、radio
元素的标注
for:规定 label 与哪个表单元素绑定, 主要针对单选框和多选框
<!DOCTYPE html> <html lang="en"> <body> 男<input type="radio" name="aa" id="man"> 女<input type="radio" name="aa" id="woman"> <hr> <label for="man">选择男的</label> <label for="woman">选择女的</label> </body> </html>
04 <textarea>
文本域,可以输入多行文本
disabled:禁用文本框。
readonly:文本只读。
name: 元素名称。
rows: 行
<!DOCTYPE html> <html lang="en"> <body> <textarea cols="5" rows="5"></textarea> </body> </html>
05 <button>
定义按钮
type: 规定按钮的类型,取值:button, reset, submit,默认button
disabled:禁用该按钮。
<!DOCTYPE html> <html lang="en"> <body> <!-- 普通按钮 --> <button>普通按钮</button> <!-- 使用button标签的重置和提交 --> <button type="reset">重置</button> <button type="submit">提交</button> <hr> <!-- 使用input标签的重置和提交 --> <input type="submit"> <input type="reset"> </body> </html>
06 <select>
下拉列表
- disabled:禁用。
- name:元素名称。
<optgroup>
定义下拉列表中的选项组
- label:为选项组规定描述。
- disabled:禁用该选项组。
<option>
定义下拉列表中选项
- value:定义送往服务器的选项值。
- selected:默认选中。
- disabled:禁用该选项。
<!-- 简单的下拉列表 -->
<!DOCTYPE html>
<html lang="en">
<body>
<select>
<option value="">南山区</option>
<option value="" selected>福田区</option>
<option value="">龙华区</option>
</select>
</body>
</html>
<!-- 选项组(了解) -->
<!DOCTYPE html>
<html lang="en">
<body>
<select>
<optgroup label="广东城市">
<option value="">广州1</option>
<option value="">广州2</option>
<option value="">广州3</option>
</optgroup>
<optgroup label="广西城市">
<option value="">南宁1</option>
<option value="">南宁2</option>
<option value="">南宁3</option>
</optgroup>
</select>
</body>
</html>
07 表单的一些规则
(1) 提交按钮`submit` 可以触发`<form>`向服务器端发送请求。(了解)
(2) 表单提交时当前页面会刷新。(了解, 这种方式现在几乎不用了)
(3) `<form>`通常不会使用 *action*等属性 向服务器发送数据,现在使用 ajax将表单数据发送到服务器。
(4) 表单控件需要设置name,id等属性。
(5) 重置按钮`reset` 只有在 `<form>`中才可以重置表单控件中数据。
(6) 表单控件可以不在`<from>`中单独使用。
(10) iframe 标签
网页中的网页
<!DOCTYPE html> <html lang="en"> <body> <h3>我的网页</h3> <iframe width="600" height="400" src="http://zl.huruqing.cn" frameborder="0"></iframe> </body> </html>
(11) 作业
(1) 使用所学标签实现百度注册页面
(2) 实现以下的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" align="center" cellspacing="0">
<caption>风车</caption>
<tr>
<td align="center" width="50" height="50" colspan="2">1</td>
<!-- <td align="center" width="50" height="50">2</td> -->
<td align="center" width="50" height="50" rowspan="2">2</td>
</tr>
<tr>
<td align="center" width="50" height="50" rowspan="2">4</td>
<td align="center" width="50" height="50">5</td>
<!-- <td align="center" width="50" height="50">6</td> -->
</tr>
<tr>
<!-- <td align="center" width="50" height="50">7</td> -->
<td align="center" width="50" height="50" colspan="2">3</td>
<!-- <td align="center" width="50" height="50">9</td> -->
</tr>
</table>
</body>
</html>
(3) 实现华容道表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" align="center">
<caption>三国华容道</caption>
<tr>
<td align="center" height="50" width="50" rowspan="2">张飞</td>
<td align="center" height="50" width="50" rowspan="2" colspan="2">曹操</td>
<!-- <td align="center" height="50" width="50">1-3</td> -->
<td align="center" height="100" width="50" rowspan="2">马超</td>
</tr>
<tr>
<!-- <td align="center" height="50" width="50">2-1</td> -->
<!-- <td align="center" height="50" width="50">2-2</td> -->
<!-- <td align="center" height="50" width="50">2-3</td> -->
<!-- <td align="center" height="50" width="50">2-4</td> -->
</tr>
<tr>
<td align="center" height="50" width="50" rowspan="2">赵云</td>
<td align="center" height="50" width="50" colspan="2">关羽</td>
<!-- <td align="center" height="50" width="50">3-3</td> -->
<td align="center" height="50" width="50" rowspan="2">黄忠</td>
</tr>
<tr>
<!-- <td align="center" height="50" width="50">4-1</td> -->
<td align="center" height="50" width="50">卒</td>
<td align="center" height="50" width="50">卒</td>
<!-- <td align="center" height="50" width="50">4-4</td> -->
</tr>
<tr>
<td align="center" height="50" width="50">卒</td>
<td align="center" height="50" width="50" colspan="2"></td>
<!-- <td align="center" height="50" width="50">5-3</td> -->
<td align="center" height="50" width="50">卒</td>
</tr>
</table>
</body>
</html>